<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3幻灯片</title>
    <style type="text/css" media="screen">
        .items {
            width: 380px;
            height: 350px;
            border: 1px solid #ddd;
            box-sizing: border-box;
            border-radius:10px;
            background-size: cover;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            background-repeat: no-repeat;
            /*-webkit-animation: slider 5s ease-out infinite alternate;*/
            animation: slider 15s ease-in-out infinite alternate;
            -webkit-transform-origin: center center;
                    transform-origin: center center;

        }



        @-webkit-keyframes slider {
            0% {
                background-image: url(1.png) ;
            }
            25% {
                background-image: url(2.png) ;

            }
            50% {
                background-image: url(3.png) ;

            }
            75% {
                background-image: url(4.png);

            }
            100% {
                background-image: url(5.png);

            }
        }
@keyframes slider {
            0% {
                background-image: url(1.png) ;

            }
            25% {
                background-image: url(2.png) ;

            }
            50% {
                background-image: url(3.png) ;

            }
            75% {
                background-image: url(4.png);

            }
            100% {
                background-image: url(5.png);

            }
        }

        .items:hover{
             -webkit-animation-play-state: paused;
            -moz-animation-play-state: paused;
            -o-animation-play-state: paused;
             animation-play-state: paused;
        }


    </style>
</head>

<body>
    <div class="slider">
        <div class="items"></div>
    </div>
</body>

</html>